<style scoped>
  .swiper {
    margin-top: 1rem;
  }
  .swiper-container {
    width: 100%;
    height: 3.75rem;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

</style>
<template>
  <div class="swiper">

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="http://img.baitongshiji.com/data/upload/hyAug/5b6581bfb3cda.jpg"  width="100%"/>
        </div>
        <div class="swiper-slide">
          <img src="http://img.baitongshiji.com/data/upload/hyAug/5b62de4aaeedd.jpg"  width="100%"/>
        </div>
        <div class="swiper-slide">
          <img src="http://img.baitongshiji.com/data/upload/hyJun/5b220fc37e5b4.jpg"  width="100%"/>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>

  </div>
</template>

<script>
  import Swiper from '../../static/js/swiper.min'
  import '../assets/css/swiper.min.css'
  export default {
    name: '',
    data () {
      return {}
    }, created(){

    }, mounted(){
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      });

    }, methods: {

    },beforeUpdate(){

    }
  }
</script>
